<template>
    <div id="tree">
        <div @click.stop="sendItem(item)" v-for="(item, index) in data" :key="item.id">
            {{ item.name }}
            <!-- 自己使用自己，渲染结束条件时没有children值 -->
            <TreeItem :data="item.children" v-if="item?.children?.length" @send-item="sendItem"></TreeItem>
        </div>
    </div>
</template>

 <script setup lang="ts">
import { } from 'vue'
// 递归组件
// 自己引入自己
import TreeItem from './Tree.vue'

type TreeList = {
    id: number
    name: string,
    icon?: string,
    children?: TreeList[] | []
}

type Props = {
    data: TreeList[]
}
defineProps<Props>()

const emit = defineEmits(['send-item'])
const sendItem = (item:TreeList) => { 
   emit('send-item',item)
 }

</script>

<style lang="less" scoped>
#tree {
    margin: 10px 5px;
}
</style>